<template>
    <el-dialog ref="changeTitle" :title="showTitle" :visible="showDialog" @close='close'>
        <!-- 放置弹窗内容 -->
        <el-form ref="addDept" label-width="120px" :model="fromdata" :rules="rules">
            <el-form-item label="部门名称" prop="name">
                <el-input placeholder="2-10个字符" size="small" style="width: 80%;" v-model="fromdata.name"></el-input>
            </el-form-item>
            <el-form-item label="部门编码" prop="code">
                <el-input placeholder="2-10个字符" size="small" style="width: 80%;" v-model="fromdata.code"></el-input>
            </el-form-item>
            <el-form-item label="部门负责人" prop="managerId">
                <el-select placeholder="请选择负责人" size="small" style="width: 80%;" v-model="fromdata.managerId">
                    <!-- 下拉选项，循环 负责人数据 label 为显示内容 value 为真实值 -->
                    <el-option v-for="item in manageList" :key="item.id" :label="item.username"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="部门介绍" prop="introduce">
                <el-input placeholder="1-100个字符" type="textarea" style="width: 80%;" :rows="4" size="small"
                    v-model="fromdata.introduce"></el-input>
            </el-form-item>
            <el-form-item>
                <el-row type="flex" justify="center">
                    <el-col :span="12">
                        <el-button type="primary" size="mini" @click="btnOk">确定</el-button>
                        <el-button size="mini" @click="close()">取消</el-button>
                    </el-col>
                </el-row>
            </el-form-item>

        </el-form>

    </el-dialog>
</template>

<script>
import { updateDepartment, getDepartment, getMangerList, addDepartment, getDepartmentDetail } from '@/api/department'


export default {
    name: 'AddDept',
    props: {
        showDialog: {
            type: Boolean,
            default: false
        },
        currentNodeId: {
            type: Number,
            default: null
        }
    },
    data() {
        return {
            manageList: [],// 存储负责人的列表
            fromdata: {
                code: '', //部门编码
                introduce: '', //部门介绍
                managerId: '', //部门负责人
                name: '', //部门名称
                pid: '', //上级部门id
            },
            rules: {
                code: [
                    { required: true, message: '部门编码不能为空', trigger: 'blur' },
                    { min: 2, max: 10, message: '部门编码长度在2-10个字符之间', trigger: 'blur' },
                    {
                        trigger: 'blur',
                        validator: async (rule, value, callback) => {
                            let result = await getDepartment()
                            if (this.fromdata.id) { //在编辑场景下，排除自身
                                result = result.filter(item => item.id !== this.fromdata.id)
                            }
                            if (result.some(item => item.code === value)) {
                                callback(new Error('部门编码重复'))
                            } else {
                                callback()
                            }
                        }

                    }
                ], //部门编码
                introduce: [
                    { required: true, message: '部门介绍不能为空', trigger: 'blur' },
                    { min: 2, max: 10, message: '部门介绍长度在1-100个字符之间', trigger: 'blur' }
                ], //部门介绍
                managerId: [
                    { required: true, message: '部门负责人不能为空', trigger: 'blur' },

                ], //部门负责人
                name: [
                    { required: true, message: '部门名称不能为空', trigger: 'blur' },
                    { min: 2, max: 10, message: '部门名称长度在2-10个字符之间', trigger: 'blur' },
                    {
                        trigger: 'blur',
                        validator: async (rule, value, callback) => {
                            let result = await getDepartment()
                            if (this.fromdata.id) {
                                result = result.filter(item => item.id !== this.fromdata.id)
                            }
                            if (result.some(item => item.name === value)) {
                                callback(new Error('部门名称重复'))
                            } else {
                                callback()
                            }
                        }

                    }
                ], //部门名称
            }
        }
    },
    created() {
        this.getManagerList()
    },
    computed:{
        showTitle(){
            return this.fromdata.id ? '编辑部门' : '新增部门'

        }
    },
    methods: {
        close() {
            // resetFields() 重置表单数据,只能重置模板中绑定的数据
            this.$refs.addDept.resetFields()
            this.fromdata={
                code: '', //部门编码
                introduce: '', //部门介绍
                managerId: '', //部门负责人
                name: '', //部门名称
                pid: '', //上级部门id
            }

            // 修改父组件值，子传父
            this.$emit('update:showDialog', false)
        },
        async getManagerList() {
            this.manageList = await getMangerList()

        },
        // 表单点击确认后相关操作
        btnOk() {
            this.$refs.addDept.validate(async isok => {
                let msg = '新增'
                //新增场景
                if (isok) { // 判定校验是否通过
                    if (this.fromdata.id) {
                        // 编辑场景
                        await updateDepartment(this.fromdata)
                        msg = '编辑'
                    } else {
                        await addDepartment({ ...this.fromdata, pid: this.currentNodeId })
                        // 通知父组件更新
                        
                    }
                }
                this.$emit('updateDepartment')
                this.close()
                this.$message.success(`${msg}部门成功`)

            })
        },
        // 获取组织的详情
        async getDepartmentDetail() {
            this.fromdata = await getDepartmentDetail(this.currentNodeId)
            
        }


    }

}

</script>